﻿@model OrderPackageModel
@using Logistics.Web.Models.Order
@using Nop.Core.Domain.Logistics

@using (Html.BeginForm("Package", "Order", FormMethod.Post, new { id = "package-form" }))
{
    var packageInRange = false;
    @Html.HiddenFor(model => model.PackageId)
    @Html.HiddenFor(model => model.ShowNextPackage)
    @Html.HiddenFor(model => model.PackageCount)
    @Html.HiddenFor(model => model.IsNoLabel)
    <div class="my-packages">
        <h3>My Packages</h3>

        @for (int i = 1; i <= Model.PackageCount; i++)
        {
            <input type="button" @if (Model.PackageId != i) { <text> data-action="submit" data-name="packageAction" data-value="loadPackage" data-packageid="@i" </text> } class="btn btn-normal package-inrange @if (Model.PackageId == i){ <text>active</text> packageInRange = true;
                                                                                                                }" value="Package #@i" />
        }
        @if (!packageInRange)
        {
            <input type="button" class="btn btn-normal package-new active" value="Package #@Model.PackageId" data-value="loadPackage" data-packageid="@Model.PackageId" />
        }
    </div>
    <h3 class="package-title">Package #@Model.PackageId</h3>
    <div class="package-container">
        <div class="section-wrapper">
            <div class="col-xs-12">
                <h4>1) Package Dimension:</h4>
                <p>Please select one of the following package dimension.</p>
                <div class="package-presets">
                    <div class="package-preset">
                        <div class="package-preset-wrapper @if(Model.PackagePreset == (int)PackagePreset.Letter){<text>selected</text>}" data-name="@Html.NameFor(model =>model.PackagePreset)" data-value="@((int)PackagePreset.Letter)">
                            <img src="/content/images/size-lettersize.png" alt="Letter size package, max weight 66 lb and max 12 in. X 9 in. X 1 in. in dimension.">
                            <span class="package-price">$3.99</span>
                        </div>
                        <div class="text">Letter</div>
                        <div class="measurement">
                            <strong>Max Weight</strong><br />
                            <span>66 lb.</span><br />
                            <strong>Max Size</strong><br />
                            <span>12 in. X 9 in. X 1 in.</span>
                        </div>
                    </div>
                    <div class="package-preset">
                        <div class="package-preset-wrapper @if(Model.PackagePreset == (int)PackagePreset.Small){<text>selected</text>}" data-name="@Html.NameFor(model =>model.PackagePreset)" data-value="@((int)PackagePreset.Small)">
                            <img src="/content/images/size-small.png" alt="Smll size package, max weight 66 lb and max total size 28 in.">
                            <span class="package-price">$4.99</span>
                        </div>
                        <div class="text">Small</div>
                        <div class="measurement">
                            <strong>Max Weight</strong><br />
                            <span>66 lb.</span><br />
                            <strong>Max Size</strong><br />
                            <span>28 in. total</span>
                        </div>
                    </div>
                    <div class="package-preset">
                        <div class="package-preset-wrapper @if(Model.PackagePreset == (int)PackagePreset.Medium){<text>selected</text>}" data-name="@Html.NameFor(model =>model.PackagePreset)" data-value="@((int)PackagePreset.Medium)">
                            <img src="/content/images/size-medium.png" alt="Medium size package, max weight 66 lb and max total size 48 in.">
                            <span class="package-price">$6.99</span>
                        </div>
                        <div class="text">Medium</div>
                        <div class="measurement">
                            <strong>Max Weight</strong><br />
                            <span>66 lb.</span><br />
                            <strong>Max Size</strong><br />
                            <span>48 in. total</span>
                        </div>
                    </div>
                    <div class="package-preset">
                        <div class="package-preset-wrapper @if(Model.PackagePreset == (int)PackagePreset.Large){<text>selected</text>}" data-name="@Html.NameFor(model =>model.PackagePreset)" data-value="@((int)PackagePreset.Large)">
                            <img src="/content/images/size-large.png" alt="Large size package, max weight 66 lb and max total size 68 in.">
                            <span class="package-price">$8.99</span>
                        </div>
                        <div class="text">Large</div>
                        <div class="measurement">
                            <strong>Max Weight</strong><br />
                            <span>66 lb.</span><br />
                            <strong>Max Size</strong><br />
                            <span>68 in. total</span>
                        </div>
                    </div>
                    <div class="package-preset">
                        <div class="package-preset-wrapper @if(Model.PackagePreset == (int)PackagePreset.ExtraLarge){<text>selected</text>}" data-name="@Html.NameFor(model =>model.PackagePreset)" data-value="@((int)PackagePreset.ExtraLarge)">
                            <img src="/content/images/size-extralarge.png" alt="Extra large size package, max weight 66 lb and max total size 88 in.">
                            <span class="package-price">$12.99</span>
                        </div>
                        <div class="text">Extra Large</div>
                        <div class="measurement">
                            <strong>Max Weight</strong><br />
                            <span>66 lb.</span><br />
                            <strong>Max Size</strong><br />
                            <span>88 in. total</span>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="measurement-sizes">
                        <div class="text">SpotsHUB Maximum Size: L + W + H.</div>
                        <img src="/content/images/measurement-sizes.png" alt="FOr packages, SpotsHUB maximum size equals to the measurement of length, width, and height combined.">
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            @Html.HiddenFor(model => model.PackagePreset)
        </div>
        <div class="section-wrapper">
            <div class="col-xs-12">
                <h4>2) Handling Instruction:</h4>
                <p>Please select one of the following package dimension.</p>
            </div>
            
            <div class="clear"></div>
            <div class="package-options">
                <div class="col-xs-4">
                    <div class="package-option package-option-vertical">
                        
                        <div class="package-option-wrapper @if(Model.IsVertical){<text>selected</text>}" data-name="@Html.NameFor(model => model.IsVertical)">
                            <div class="image">
                                <img src="/content/images/icon-vertical.png" title="@T("Logistics.Order.Package.IsVertical")" alt="@T("Logistics.Order.Package.IsVertical")" />
                            </div>
                            <div class="text">
                                Vertical <br />
                                + $1
                            </div>
                        </div>
                        <div class="order-tip" data-target="package-vertical">?</div><div class="popover-message"></div>
                    </div>
                    @Html.HiddenFor(model => model.IsVertical, false)
                    <div class="clear"></div>
                </div>
                <div class="col-xs-4">
                    <div class="package-option package-option-fragile">
                        
                        <div class="package-option-wrapper @if(Model.IsFragile){<text>selected</text>}" data-name="@Html.NameFor(model => model.IsFragile)">
                            <div class="image">
                                <img src="/content/images/icon-fragile.png" title="@T("Logistics.Order.Package.IsFragile")" alt="@T("Logistics.Order.Package.IsFragile")" />
                            </div>
                            <div class="text">
                                Fragile <br />
                                + $3
                            </div>
                        </div>
                        <div class="order-tip" data-target="package-fragile">?</div><div class="popover-message"></div>
                    </div>
                    @Html.HiddenFor(model => model.IsFragile, false)
                    <div class="clear"></div>
                </div>
                <div class="col-xs-4">
                    <div class="package-option package-option-dangerous">
                        
                        <div class="package-option-wrapper @if(Model.IsDangerous){<text>selected</text>}" data-name="@Html.NameFor(model => model.IsDangerous)">
                            <div class="image">
                                <img src="/content/images/icon-dangerous.png" title="@T("Logistics.Order.Package.IsDangerous")" alt="@T("Logistics.Order.Package.IsDangerous")" />
                            </div>
                            <div class="text">
                                Dangerous <br />
                                + $6
                            </div>
                        </div>
                        <div class="order-tip" data-target="package-dangerous">?</div><div class="popover-message"></div>
                    </div>

                    @Html.HiddenFor(model => model.IsDangerous)
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="section-wrapper">
            <div class="col-xs-12">
                <h4>3) Additional Package Insurance: <span class="order-tip" data-target="package-insurance">?</span><span class="popover-message"></span></h4>
            </div>

            @if (Model.InsuranceEnabled)
            {
                <div class="col-sm-6">
                    <div class="package-option">
                        @T("Logistics.Order.Package.InsuranceValue.Declare"):
                        <div class="icon-info icon"></div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="package-line package-weight-input package-input-wrapper">
                        @Html.TextBoxFor(model => model.InsuranceValue, new { @class = "form-control" })
                    </div>
                </div>
            }
            else
            {
                <div class="col-xs-12">
                    @T("Logistics.Order.InsuranceDisable").Text
                </div>
            }
            <div class="clear"></div>
        </div>

        <div class="section-wrapper">
            <div class="col-xs-12">
                <h4>4) Package Reference:</h4>
            </div>
            <div class="col-sm-6">
                @T("Logistics.Order.Package.Comment.Enter"):
            </div>
            <div class="col-sm-6">
                <div class="package-line package-comment-input">
                    @Html.TextAreaFor(model => model.Comment, new { @class = "form-control" })
                </div>
                <div class="package-line character-limit">
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="popover-contents">
            <div id="package-vertical" class="popover-content">
                <div class="title">
                    Vertical Handling
                </div>
                <div class="content">
                    <p>Please select this option if the package needs to be shipped in a specific orientation. The outside of package must have clear markings, specifying the preferred orientation (e.g., "Up arrows" or "This Side Up" markings).</p>
                </div>
            </div>
            <div id="package-fragile" class="popover-content">
                <div class="title">
                    Fragile Items
                </div>
                <div class="content">
                    <p>Please select this option if the package could be easily broken or damaged, or needs special handling while being shipped.</p>
                </div>
            </div>
            <div id="package-dangerous" class="popover-content">
                <div class="title">
                    Dangerous Goods
                </div>
                <div class="content">
                    <p>Please select this option if the package being shipped is listed in the Transportation of Dangerous Goods Regulations by the Canadian Transport Emergency Centre (CANUTEC). A shipping document that contains detailed information about the package is required to be presented for each dangerous good to be shipped.</p>
                </div>
            </div>
            <div id="package-insurance" class="popover-content">
                <div class="title">
                    Additional Insurance
                </div>
                <div class="content">
                    <p>SpotsHUB provides FREE insurance coverage against damage or loss for the first $20 of the declared value of each package.</p>
                    <p>You may purchase additional insurance coverage in increments of $20 up to a maximum of $5,000 for most items. The cost of additional insurance is $0.40 per $20 of declared value (after the first $20).</p>
                    <p>Additional insurance must be selected when placing the order to ensure that it is properly captured and linked to the unique tracking number of your package. Any damaged or lost package without a declared value will be covered for $20 only.</p>
                </div>
            </div>
        </div>
        <div class="clear"></div>

    </div>
    
    <div class="package-group-button">
        <div class="col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center">
            <input type="button" class="btn btn-normal btn-block" data-action="submit" data-name="packageAction" data-value="add" value="Save Package and Add" />
        </div>
        <div class="col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center">
            <input type="button" class="btn btn-normal btn-block" data-action="submit" data-name="packageAction" data-value="remove" value="Remove Package" />
        </div>
        <div class="col-ms-12 col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <input type="button" class="btn btn-normal btn-block" data-action="submit" data-name="packageAction" data-value="continue" value="Save and Continue" />
        </div>
        <div class="clear"></div>
    </div>
    <div class="back-to-top">
        <a href="#backtop"><i class="fa fa-angle-up"></i></a>
    </div>
}

<script>
    $(window).scroll(function () {
        if ($(this).scrollTop()) {
            $('.back-to-top').fadeIn();
        } else {
            $('.back-to-top').fadeOut();
        }
    });

    $(".back-to-top").click(function (e) {
        e.preventDefault();
        $("body,html").animate({ scrollTop: 0 }, 500);
    });

    $(document).ready(function () {
        checkEnterPackageMeasurement(false);
        $("input[name=SpotshubPackageSize]").change(function () {
            checkEnterPackageMeasurement(true);
        });
        function checkEnterPackageMeasurement(animation) {
            if (parseInt($("input[name=SpotshubPackageSize]:checked").val()) == 0) {
                if (animation == true) {
                    $(".package-measurement-wrapper").stop().animate({ height: $(".package-measurement-container").outerHeight(true) });
                } else {
                    $(".package-measurement-wrapper").css("height", "auto");
                }
            } else {
                if (animation == true) {
                    $(".package-measurement-wrapper").stop().animate({ height: 0 });
                } else {
                    $(".package-measurement-wrapper").css("height", 0);
                }
            }
        }
        $(".package-options .package-option-wrapper").click(function () {
            $("input[name=" + $(this).attr("data-name") + "]").remove();
            if ($(this).hasClass("selected")) {
                $(this).removeClass("selected");
                $(this).append('<input type="hidden" value="@Boolean.FalseString" name="'+$(this).attr("data-name")+'">');
            } else {
                $(this).addClass("selected");
                $(this).append('<input type="hidden" value="@Boolean.TrueString" name="' + $(this).attr("data-name") + '">');
            }
        });
        $(".package-presets .package-preset-wrapper").click(function () {
            $(".package-presets .package-preset-wrapper").removeClass("selected");
            $(this).addClass("selected");
            $("input[name=" + $(this).attr("data-name") + "]").remove();
            $(this).append('<input type="hidden" value="' + $(this).attr("data-value") + '" name="' + $(this).attr("data-name") + '">');
        });
    });

</script>